<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name=”renderer” content=”webkit”>
    <meta name="referrer" content="never">
    <title>学习笔记-关中刀客在青岛</title>
    <meta name="keywords" content="关中刀客在青岛,喜欢音乐的程序猿,个人博客,web开发,前端技术博客">
    <meta name="description" content="夕阳无限好，黄昏又如何——作者31岁转行，本站是以前端技术为主的个人博客">
    <link rel="stylesheet" href="../assets/css/bootstrap-4.3.1.min.css">
    <link rel="stylesheet" href="../css/common.css">
</head>

<body id="notesPage">
    <nav id="mainNav" class="navbar navbar-expand-md navbar-dark mb-md-5"></nav>
    <main class="container">

        <div class="row">
            <div class="col-md-12">
                <h2 class="mt-5 mt-md-2 text-md-center">学习笔记</h2>
                <p class="mb-4">
                    这里珍藏着我踏入前端领域的点点滴滴学习笔记。每一次的记录，都是在不同的时间与环境下完成的，它们有的被细心地整理在web页面上，有的则静静地躺在网易云笔记中，还有的只是简单的纯文本形式。因此，这些笔记的风格样式或许显得杂乱无章，但每一篇都蕴含着我对知识的渴望和对技术的热情。
            </div>
            <ul id="notesList" class="px-4">
                <li v-for="(item,index) in dataList" :class="'mb-3 p-3 item '+(item.url?'':'disabled')" v-cloak>
                    <h4 class="mb-3"><a :href="item.url" target="_blank">{{item.title}}</a></h4>
                    <p class="mb-2" v-html="item.disc"></p>
                    <footer>
                        {{item.startTime+(item.endTime ? ' ~ '+item.endTime:'')}}
                    </footer>
                </li>
            </ul>
        </div>
    </main>
    <footer></footer>

    <script src="../assets/js/jquery-2.2.4.min.js"></script>
    <script src="../assets/js/bootstrap-4.3.1.min.js"></script>
    <script src="../assets/js/vue-2.6.10.min.js"></script>
    <script src="../js/common.js"></script>
    <script>
        let friendlyLink = new Vue({
            el: '#notesList',
            data: {
                dataList: []
            },
            created() {
                $.get('../data/noteListLink.json', data => {
                    this.dataList = data.notes
                })
            }
        })
    </script>
</body>

</html>